<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>首页</title>
	</head>
	<body class="df fdc">
		<main class="flex">
			<!-- 轮播图 -->
			<div id="banner" class="swiper">
				<div class="swiper-wrapper">
					<div id="swiper1" class="swiper-slide"></div>
					<div id="swiper2" class="swiper-slide"></div>
					<div id="swiper3" class="swiper-slide"></div>
				</div>
				<!-- 分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<div id="mainCont">
				<!-- 排名和打卡 -->
				<div id="rank_punch" class="df jsbetween">
					<div class="rank df fdc">
						<p class="f18">今日排名</p>
						<span id="rankTxt"></span>
					</div>
					<div class="punch">
						<p class="f18">累计打卡<span id="punchTxt"></span>天</p>
						<div class="df jright">
							<p id="punchBtn" class="tcenter b-box f14"></p>
						</div>
					</div>
				</div>
				<!-- 运动数据和徽章 -->
				<div id="data_badge" class="df jsbetween">
					<div class="data">运动数据</div>
					<div class="badge rel">
						<p>运动积累徽章</p>
						<p class="count abs"><span id="badgeTxt"></span>枚</p>
					</div>
				</div>
				<!-- 训练课程 -->
				<div id="course">
					<div class="common">课程训练</div>
				</div>
				<!-- 户外跑步 -->
				<div id="run">
					<div class="common">户外跑步</div>
				</div>
				<!-- 户外骑行 -->
				<div id="ride">
					<div class="common">户外骑行</div>
				</div>
				<!-- 户外游泳 -->
				<div id="swim">
					<div class="common">游泳</div>
				</div>
				<!-- 室内游泳 -->
				<div id="dive">
					<div class="common">潜水</div>
				</div>
			</div>
			<!-- <div id="tabBox"></div> -->
		</main>
		<!-- 底部tab栏 -->
		<!-- <div id="tabBox"></div>
		<footer id="bottomTab">
			<ul class="df">
				<li><span class="iconfont icon-home"></span><span>首页</span></li>
				<li><span class="iconfont icon-heart-rate"></span><span>运动</span></li>
				<li><span class="iconfont icon-Vector"></span><span>圈子</span></li>
				<li><span class="iconfont icon-wode"></span><span>我的</span></li>
			</ul>
		</footer> -->
	</body>
</html>
